<template>
    <el-dialog
        :title="title === 'add' ? '新增' : '编辑'"
        :close-on-click-modal="false"
        :visible.sync="dialogVisible"
        width="35%"
        :info="info"
        @close="closeDialog"
    >
        <el-form ref="form" :inline="false" :model="formData" :rules="rules" label-width="120px" size="normal">
            <el-form-item label="奖励名称" prop="title">
                <el-input
                v-model="formData.title"
                placeholder="请输入奖励名称"
                />
            </el-form-item>
            <el-form-item label="打卡天数" prop="day">
                <el-input
                v-model="formData.day"
                placeholder="请输入打卡天数"
                />
            </el-form-item>
            <el-form-item label="情侣等级" prop="level">
                <el-input
                v-model="formData.level"
                placeholder="请输入情侣等级"
                />
            </el-form-item>
            <el-form-item label="奖品标签" prop="label_id">
                <el-select v-model="formData.label_id" value-key="" placeholder="请选择" clearable filterable>
                    <el-option v-for="item in options"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="剩余数量" prop="inventory">
                <el-input
                v-model="formData.inventory"
                placeholder="请输入剩余数量"
                />
            </el-form-item>
            <el-form-item label="展示图片" prop="show_picture">
                <div class="awardBox" :class="[formData.shows.length >= 4 ? 'hide_box' : '']">
                    <el-upload
                        :auto-upload="true"
                        action="#"
                        :http-request="customizeUpload"
                        :on-success="(response, file, fileList) => handlePictureSuccess(response, file, fileList)"
                        :on-remove="(file, fileList) => handlePictureRemove(file, fileList)"
                        :limit="4"
                        :file-list="formData.shows"
                        list-type="picture-card">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <!-- <el-upload
                        ref="upload"
                        :auto-upload="true"
                        :before-upload="beforeAvatarUpload"
                        :http-request="customizeUpload"
                        :on-success="(response, file, fileList) => handlePictureSuccess(response, file, fileList)"
                        action=""
                        class="upload-demo"
                        :limit="4"
                        list-type="picture-card"
                    >
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{file}">
                            <img
                                class="el-upload-list__item-thumbnail"
                                :src="file.url" alt=""
                            >
                            <span class="el-upload-list__item-actions">
                                <span
                                v-if="!disabled"
                                class="el-upload-list__item-delete"
                                @click="handlePictureRemove(file)"
                                >
                                <i class="el-icon-delete"></i>
                                </span>
                            </span>
                        </div>
                    </el-upload> -->
                    <!-- <div v-for="(item, index) in formData.show_picture" :key="index" class="awardInfo" :class="{'hide_box': item, 'show_box': !item}"> -->
                        <!-- <img v-if="item" :src="item" class="avatar" />
                        <el-upload
                            v-else
                            ref="upload"
                            :auto-upload="true"
                            :before-upload="beforeAvatarUpload"
                            :http-request="customizeUpload"
                            :on-success="() => handlePictureSuccess(index)"
                            action=""
                            class="upload-demo"
                            :limit="1"
                            list-type="picture-card"
                        >
                            <i slot="default" class="el-icon-plus"></i>
                        </el-upload> -->
                        <!-- <el-upload
                            ref="upload"
                            :auto-upload="true"
                            :before-upload="beforeAvatarUpload"
                            :http-request="customizeUpload"
                            :on-success="() => handlePictureSuccess(index)"
                            :on-remove="() => handlePictureRemove(index)"
                            action=""
                            class="upload-demo"
                            :limit="1"
                            list-type="picture-card"
                        >
                            <i slot="default" class="el-icon-plus"></i>
                            
                        </el-upload> -->
                        <!-- <span class="closeIcon" @click="handlePictureRemove(index)"><i class="el-icon-delete"></i></span>
                    </div> -->
                </div>
            </el-form-item>
            <el-form-item label="介绍图片" prop="">
                <div class="awardBox">
                    <div class="awardInfo" :class="{'hide_box': formData.detail, 'show_box': !formData.detail}">
                        <img v-if="formData.detail" :src="formData.detail" class="avatar" />
                        <el-upload
                            v-else
                            ref="upload"
                            :auto-upload="true"
                            :http-request="customizeUpload"
                            :on-success="handlePictureSuccess1"
                            action=""
                            class="upload-demo"
                            :limit="1"
                            list-type="picture-card"
                        >
                            <i slot="default" class="el-icon-plus"></i>
                        </el-upload>
                        <span class="closeIcon" @click="handlePictureRemove1"><i class="el-icon-delete"></i></span>
                    </div>
                </div>
            </el-form-item>
        </el-form>

        <section slot="footer">
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="onSubmit()">确定</el-button>
        </section>
    </el-dialog>
</template>
  
<script>
  import { wishProductSave, labelList } from '@/api/wishingHouse'
  export default {
    name: '',
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: 'add'
        },
        info: {
            type: Object,
            default: () => {
                return {
                    id: undefined,
                    title: undefined,
                    day: undefined,
                    label: undefined,
                    label_id: undefined,
                    inventory: undefined,
                    is_active: undefined,
                    show_picture: undefined,
                    detail: undefined,
                    shows: []
                }
            }
        },
        
    },
    data() {
      return {
        formData: {
            id: undefined,
            title: undefined,
            day: undefined,
            label: undefined,
            inventory: undefined,
            is_active: undefined,
            show_picture: undefined,
            detail: undefined,
            level: undefined,
            label_id: undefined,
            shows: []
        },
        rules: {
            title: [{ required: true, message: '请输入奖励名称', trigger: 'blur' }],
            day: [{ required: true, message: '请输入打卡天数', trigger: 'blur' }],
            label_id: [{ required: true, message: '请选择奖励标签', trigger: 'blur' }],
            level: [{ required: true, message: '请输入情侣等级', trigger: 'blur' }],
            inventory: [{ required: true, message: '请输入剩余数量', trigger: 'blur' }],
            show_picture: [{ required: true, message: '请上传展示图片', trigger: 'blur' }]
        },
        options: [],
        fileListLength: 0
      }
    },
    watch: {
        title: async function(newValue, oldValue) {
            console.log(newValue,'title',this.info)
            if (newValue === 'edit') {
                this.formData = {
                    id: this.info.id,
                    title: this.info.title,
                    day: this.info.day,
                    label: this.info.label,
                    inventory: this.info.inventory,
                    is_active: this.info.is_active,
                    show_picture: this.info.show_picture,
                    detail: this.info.detail,
                    level: this.info.level,
                    label_id: this.info.label_id,
                    shows: this.info.shows,
                }
            }
        }
    },
    created() {
      this.getLabelList()
    },
  
    methods: {
        getLabelList() {
            labelList({
                page: 1,
                perPage: 1000
            }).then(res =>{
                if(res.code === 200) {
                    this.options = res.data.list
                }
            })
        },
        closeDialog() {
            if (this.$refs['form']) {
                this.$refs['form'].clearValidate(); // 清除整个表单的校验
                this.$refs['form'].resetFields() // 清除整个表单的校验
            }
            this.$emit('update:title', 'add')
            this.$emit('update:dialogVisible', false)
            this.formData = {
                id: undefined,
                title: undefined,
                day: undefined,
                label: undefined,
                inventory: undefined,
                is_active: undefined,
                show_picture: undefined,
                detail: undefined,
                level: undefined,
                label_id: undefined,
                shows: []
            }
        },
        handleCancel() {
            this.$emit('update:title', 'add')
            this.$emit('update:dialogVisible', false)
        },
        beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/webp' || file.type === 'image/gif'
            // const isLt2M = file.size / 1024 / 1024 < 2

            // if (!isJPG) {
            //     this.$message.error('请上传JPG/PNG格式的图片!')
            // }
            // if (!isLt2M) {
            //     this.$message.error('上传图片大小不能超过 2MB!')
            // }
            // return isJPG && isLt2M
        },
        onSubmit() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    for (let key in this.formData) {
                        this.formData[key] = !this.formData[key] ? undefined : this.formData[key]
                    }
                    let pictureArr = []
                    this.formData.shows.map(item => {
                        pictureArr.push(item.url)
                    })
                    this.formData.show_picture = pictureArr
                    if(!this.formData.show_picture.length) {
                        this.$message({
                            type: 'warning',
                            message: '请上传展示图片'
                        })
                        return false
                    }
                    
                    wishProductSave(this.formData).then(res => {
                        if(res.code === 200) {
                            this.dialogVisible = false
                            this.$message({
                                type: 'success',
                                message: '操作成功'
                            })
                            this.$emit('update:title', 'add')
                            this.$emit('update:dialogVisible', false)
                            this.$emit('updateTable')
                        }
                    })
                }
            })
        },
        handlePictureSuccess(response, file, fileList) {
            console.log(response, file, fileList)
            this.fileListLength = fileList.length
            this.formData.shows.push({
                url: this.ossLastImgUrl
            })
            this.formData.show_picture = []
            if(fileList.length) {
                this.formData.show_picture = []
                fileList.map(item => {
                    this.formData.show_picture.push(item.url)
                })
            }else {
                this.formData.show_picture = undefined
            }
            
        },
        handlePictureRemove(file, fileList) {
            console.log(file, fileList)
            this.formData.shows = fileList
            if(fileList.length) {
                this.formData.show_picture = []
                fileList.map(item => {
                    this.formData.show_picture.push(item.url)
                })
            }else {
                this.formData.show_picture = undefined
            }
            // this.formData.show_picture[index] = undefined
            // this.$set(this.formData.show_picture,index,undefined)
        },
        handlePictureSuccess1() {
            this.formData.detail = this.ossLastImgUrl
        },
        handlePictureRemove1() {
            this.formData.detail = undefined
        },
    }
  }
</script>
<style lang="scss" scoped>
  ::v-deep.avatar-uploader .el-upload {
    border        : 1px dashed #d9d9d9;
    border-radius : 6px;
    cursor        : pointer;
    position      : relative;
    overflow      : hidden;
  }
  
  .avatar-uploader .el-upload:hover {
    border-color : #409eff;
  }
  
  .avatar-uploader-icon {
    font-size   : 28px;
    color       : #8c939d;
    width       : 100px;
    height      : 100px;
    line-height : 100px;
    text-align  : center;
  }
  
  .avatar {
    width   : 100px;
    height  : 100px;
    display : block;
  }
  
  ::v-deep{ 
    .hide_box{
        .el-upload--picture-card {
            display: none;
        }
    }
    .el-upload-list__item {
        margin-right: 1em !important;
    }
}


  .awardBox {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    .awardInfo {
        margin-right: 10px;
        border-radius: 4px;
        position: relative;
        overflow: hidden;
        width: 148px;
        height: 148px;
        border: 1px solid #c0ccda;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;

        .closeIcon {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 10px;
            background: rgba(0,0,0,.6);
            color: #ffffff;
            overflow: hidden;
            cursor: pointer;
            font-size: 18px;
            opacity: 0;
            z-index: 0;
        }
    }
    .hide_box:hover {
        .closeIcon {
            opacity: 1;
            z-index: 1;
        }
    }
    .show_box {
        .closeIcon {
            opacity: 0;
            z-index: -1;
        }
    }
}
  </style>
  